<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Gradients</title>
	<script type="text/javascript" src="../../dist/paper-full.js"></script>
	<script type="text/paperscript" canvas="canvas">
		project.importSVG(document.getElementById('svg'));
	</script>
</head>
<body>
	<svg id="svg" x="0" y="0" width="300" height="600" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
	  <linearGradient x1="45" y1="345" x2="255" y2="555" gradientUnits="userSpaceOnUse" id="gradient-2">
	    <stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
	    <stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
	    <stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
	  </linearGradient>
	  <radialGradient cx="150" cy="150" r="120" gradientUnits="userSpaceOnUse" id="gradient-1">
	    <stop offset="0" stop-color="rgb(255, 255, 0)" stop-opacity="0"></stop>
	    <stop offset="0.5" stop-color="rgb(255, 0, 0)"></stop>
	    <stop offset="1" stop-color="rgb(0, 0, 0)"></stop>
	  </radialGradient>
	  <g fill="none" stroke="rgb(0, 0, 0)" stroke-width="1" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="10" stroke-dasharray="" stroke-dashoffset="0">
	    <circle cx="150" cy="150" r="120" fill="url(#gradient-1)"></circle>
	    <rect x="45" y="345" width="210" height="210" transform="rotate(45,150,450)" fill="url(#gradient-2)"></rect>
	  </g>
	</svg>
	<canvas id="canvas" width="300" height="600"></canvas>
</body>
</html>
